<!--  -->
<template>
  <div class="img-zoom">

    <div
      class="img-zoom-all"
      :class="{imgZoomBorder: showBorder}"
      v-for="(item, index) in sightseeingTabData"
      :key="index"
      @click="clickSightseeing(item)">
      <div class="img-range" :style="{height: conHeight - 10 + 'px'}">
        <img class="img-zoom-con" :style="{height: conHeight - 10 + 'px'}" v-lazy="item.sightseeingImgZoom" alt="">
      </div>
      <div class="btn">
        <span class="btn-span">{{item.title}}</span>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  props: {
    sightseeingTabData: {
      type: Array,
      default: () => []
    },
    showBorder: {
      type: Boolean,
      default: true
    },
    conHeight: {
      type: Number,
      default: 400
    }
  },
  data () {
    return {
    }
  },
  components: {},
  computed: {},
  created () {},
  mounted () {},
  methods: {
    clickSightseeing (item) {
      this.$emit('clickSightseeing', item)
    }
  }
}

</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
.img-zoom {
  width 100%
}
.imgZoomBorder {
}
.img-zoom-all {
  position relative
  width 280px
  margin 10px
  display inline-block
  border 1px solid #ddd
  // overflow hidden
  transition transform 0.7s
  &:hover {
    transform scale(1.1)
    box-shadow 0 0 10px 4px #ddd
  }
  .btn {
    position absolute
    left 10px
    bottom 20px
    width 260px
    height 32px
    display flex
    justify-content center
    align-items center
    .btn-span {
      color #fff
      cursor default
      width 240px
      text-overflow: ellipsis
      overflow: hidden
      white-space: nowrap
    }
  }
}
.img-range {
  overflow hidden
  background #fff
  width 260px
  height 380px
  line-height 380px
  margin 10px
  .img-zoom-con {
    min-width 260px
    height 380px
  }
}

/** 方法二 animate */

// img:hover {
//   animation imgScale 2s
// }
// @keyframes imgScale {
//   from {
//     width 200px
//     height 200px
//   }
//   to {
//     width 240px
//     height 240px
//   }
// }
</style>
